* {
    box-sizing: border-box;
}

html,
body {
    width: 99%;
    height: 99%;
}

body {
    color: #fff;
    font-family: "Rubik Glitch", system-ui;
    font-weight: 400;
    font-style: normal;
    background-color: #343131;
    background-image: url("../assets/program.png");
    background-repeat: repeat;
    background-size: 4em;
}

a {
    color: #A04747;
}

a.none {
    text-decoration: none;
}

app {
    width: 100%;
    height: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;
}

.nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav>* {
    margin: 0 1em;
    font-size: 1.4em;
}

.nav>.select {
    color: #EEDF7A;
}

.content {
    width: 100%;
    height: 85%;
    padding: 0.8em;
}

.view {
    width: 100%;
    height: 100%;
    padding: 2em;
    background-color: #343131;
    font-size: 1.1em;
    font-family: "Bitcount Grid Double", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "slnt" -8,
        "CRSV" 0,
        "ELSH" 0,
        "ELXP" 0;
    box-shadow:
        2px 0 #fff,
        -2px 0 #fff,
        0 -2px #fff,
        0 2px #fff,
        4px 0 #fff,
        -4px 0 #fff,
        0 -4px #fff,
        0 4px #fff,
        0 0 0 2px #fff;
}

.link {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.link>:first-child {
    margin-right: 10px;
    color: #A04747;
}

.italic {
    font-style: italic;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.flex {
    display: flex;
}

.content-center {
    justify-content: center;
}

.flex-center {
    align-items: center;
}

.flex-end {
    align-items: end;
}

.mx-1 {
    margin: 0 1em;
}

.mb-1 {
    margin-bottom: 1em;
}

.mb-2 {
    margin-bottom: 2em;
}